<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>登陆 - Blog</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/login.css">
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12 layui-hide-xs xs-hide"></div>
        <div class="layui-col-md4 layui-col-md-offset4 login-main">
            <img src="./static/images/logo.png" class="logo">
            <div id="login_div" class="main formbox">
                <form action="login_submit" method="get" accept-charset="utf-8" class="layui-form">
                    <div class="inputbox">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入邮箱账号"
                               autocomplete="off" class="layui-input" id="account1">
                    </div>

                    <div class="margin20"></div>
                    <div class="inputbox">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                               autocomplete="off" class="layui-input" id="password1">
                    </div>
                    <div class="margin20"></div>
                    <div class="inputbox info">
                        <input type="checkbox" name="checkbox" lay-skin="primary" checked/>
                        我已阅读并同意<a href="javascript:;">用户协议</a>和<a href="javascript:;">隐私条款</a>
                    </div>

                    <div class="layui-row layui-col-space20 bts">
                        <div class="layui-col-md6">
                            <button id="to_main_btn" type="button" class="layui-btn" lay-submit lay-filter="formDemo">
                                登陆
                            </button>
                        </div>
                        <div class="layui-col-md6">
                            <a href="javascript:clickReg()" class="layui-btn layui-btn-normal">去注册</a>
                        </div>
                        <div class="layui-col-md12">
                            <a href="index.html" class="layui-btn layui-btn-primary">返回首页</a>
                        </div>
                    </div>
                </form>
            </div>
            <div id="register_div" class="main formbox" hidden>
                <form action="login_submit" method="get" accept-charset="utf-8" class="layui-form">
                    <div class="inputbox">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入邮箱账号"
                               autocomplete="off" class="layui-input" id="account">
                    </div>

                    <div class="margin20"></div>
                    <div class="inputbox">
                        <input type="text" name="password" required lay-verify="required" placeholder="请输入密码"
                               autocomplete="off" class="layui-input" id="password">
                    </div>

                    <div class="margin20"></div>
                    <div class="inputbox">
                        <input type="text" name="password" required lay-verify="required" placeholder="请确认密码"
                               autocomplete="off" class="layui-input" id="repassword">
                    </div>
                    <br>
                    <div class="inputbox info">
                        <input type="checkbox" name="checkbox" lay-skin="primary" checked/>
                        我已阅读并同意<a href="javascript:;">用户协议</a>和<a href="javascript:;">隐私条款</a>
                    </div>

                    <div class="layui-row layui-col-space20 bts">
                        <div class="layui-col-md6">
                            <a id="login1" type="button" class="layui-btn layui-btn-normal">去登陆</a>
                        </div>
                        <div class="layui-col-md6">
                            <button id="register1" type="button" class="layui-btn" lay-submit lay-filter="formDemo">
                                确认注册
                            </button>
                        </div>
                        <div class="layui-col-md12">
                            <a href="index.html" class="layui-btn layui-btn-primary">返回首页</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./static/layui/layui.all.js"></script>
<script src="./static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var accountValue = null;
        var password = null;
        var repassword = null;
        //登录
        // 邮箱验证正则表达式
        var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        // 光标移除input输入框的时候自动获取input中的值
        $("#account1").blur(function () {
            // 获取注册input账号输入框中的值
            accountValue = $(this).val();
            localStorage.setItem("username1", accountValue);
            // 验证邮箱格式
            if (!emailRegex.test(accountValue)) {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#account1");
                var span = $("<span id='span1' style='color: red'>请输入有效的邮箱地址</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
                $(this).val('');  // 清空输入框
            } else {
                // 移除之前的提示
                $("#span1").remove();
            }
        });

        $("#password1").blur(function () {
            // 注册密码输入框中的值
            password = $(this).val();
            $("#to_main_btn").click(function () {
                $.post("Us/login", {"username": accountValue, "password": password}, function (result) {
                    var er = result.result;
                    localStorage.setItem("uid", er.uid);
                    localStorage.setItem("identity", er.identity);
                    if (result.status === 1) {
                        alert("登录成功！");
                        window.location = 'main.html';
                    } else {
                        // 移除之前的提示
                        $("#span1").remove();
                        var input = $("#account1");
                        var span = $("<span id='span1' style='color: red'>登陆失败</span>");
                        // 在输入框后面追加 span 元素
                        input.after(span);
                        $("#account1").val('');  // 清空输入框
                        $("#password1").val('');
                    }
                })
            })
        });
        //下边这块是注册模块
        // 光标移除input输入框的时候自动获取input中的值
        $("#account").blur(function () {
            // 获取注册input账号输入框中的值
            accountValue = $(this).val();
            // 验证邮箱格式
            if (!emailRegex.test(accountValue)) {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#account");
                var span = $("<span id='span1' style='color: red'>请输入有效的邮箱地址</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
                $(this).val('');  // 清空输入框
            } else {
                // 移除之前的提示
                $("#span1").remove();
            }
        });

        $("#password").blur(function () {
            // 注册密码输入框中的值
            password = $(this).val();
        });

        $("#repassword").blur(function () {
            // 获得确认注册密码输入框中的值
            repassword = $(this).val();
            if (password == "") {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#password");
                var span = $("<span id='span1' style='color: red'>请输入密码</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
            } else if (repassword == "") {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#repassword");
                var span = $("<span id='span1' style='color: red'>请输入确认密码</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
            } else if (password !== repassword) {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#repassword");
                var span = $("<span id='span1' style='color: red'>两次密码输入不一致，请检查密码</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
                $("#account").val('');
                $("#password").val('');
                $("#repassword").val('');
            } else {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#repassword");
                var span = $("<span id='span1' style='color: green'>密码输入正确</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
            }
        });

        // 注册按钮点击事件
        $("#register1").click(function () {
            accountValue = $("#account").val();
            password = $("#password").val();
            repassword = $("#repassword").val();
            // 检查密码是否一致
            if (password !== repassword) {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#repassword");
                var span = $("<span id='span1' style='color: red'>两次密码输入不一致，请检查密码</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
                $("#account").val('');
                $("#password").val('');
                $("#repassword").val('');
            }
            // 发送POST请求
            $.post("Us/add", {"username": accountValue, "password": password}, function () {
                clickLog();
            });
        });
    });

    function clickReg() {
        $("#register_div").show();
        $("#login_div").hide();
    }

    function clickLog() {
        $("#login_div").show();
        $("#register_div").hide();
    }
</script>
</html>